<template>
  <div class="create-report">
    <div class="block-box">
      <h3 class="step-header required">
        1、创建报台
      </h3>
      <div class="box-content">
        <section class="supplier-part">
          <h3 class="static-header required">
            供应商：
          </h3>
          <el-form>
            <el-form-item>
              <el-select
                v-model="page_data.create.supplier"
                placeholder="请选择供应商"
                @change="onChangeSupplier"
              >
                <el-option
                  v-for="item in render_data.rows_supplies"
                  :key="item.vendorCode"
                  :label="item.vendorName"
                  :value="item.vendorCode"
                />
              </el-select>
            </el-form-item>
          </el-form>
        </section>
        <section class="contract-part">
          <h3 class="static-header required">
            授权合同选择：
          </h3>
          <el-radio-group
            v-model="page_data.contract"
            class="w100p limit-h"
            @change="onChangeContract"
          >
            <el-editable
              v-loading="status_store.loading.contract"
              :need-pagination="true"
              :columns="CONTRACT_COLUMNS"
              :payload="render_data.payload_contracts"
              height="200"
              @reload="onLoadContractData"
            >
              <template #default-checkbox="{ row }">
                <el-radio
                  :label="row"
                  :disabled="
                    supplier_code === '1440' &&
                      (row.vendorCode === 'SHYYLQ' ||
                        row.vendorCode === 'SJSNKY')
                  "
                >
                  {{ '' }}
                </el-radio>
              </template>
            </el-editable>
          </el-radio-group>
        </section>
      </div>
    </div>
    <div class="block-box">
      <h3 class="step-header required">
        2、销售信息
      </h3>
      <div class="box-content">
        <el-form
          ref="ruleForm"
          inline
          :model="page_data.sales_info"
          :rules="render_data.sales_info_rules"
        >
          <el-row style="width: 1002px;">
            <el-col :span="8">
              <el-form-item prop="target" label="销售对象">
                <el-select
                  v-model="page_data.sales_info.target"
                  placeholder="请选择销售对象"
                >
                  <el-option
                    v-for="item in render_data.rows_sales_target"
                    :key="item.hospitalCode"
                    :label="item.hospitalName"
                    :value="item.hospitalCode"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="salesDateMonth" label="销售月">
                <el-date-picker
                  v-model="page_data.sales_info.salesDateMonth"
                  type="month"
                  value-format="yyyy-MM"
                  :clearable="false"
                  placeholder="选择年和月"
                  :picker-options="pickerOptions"
                  :disabled="
                    status_store.dateDisabled ||
                      (!status_store.salesDate.start &&
                        !status_store.salesDate.end)
                  "
                  @change="onSelectMonthChange"
                />
              </el-form-item>
              <p class="salesDateTips">{{ salesDateTips }}</p>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="date" label="销售日">
                <el-date-picker
                  v-model="page_data.sales_info.date"
                  type="date"
                  value-format="yyyy-MM-dd"
                  :clearable="false"
                  placeholder="选择日期"
                  :picker-options="dayPickerOptions"
                  :disabled="
                    status_store.dateDisabled ||
                      !page_data.sales_info.salesDateMonth
                  "
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <div class="block-box product-list-box">
      <!-- 3、销售产品 -->
      <purchase-products-list-component
        :step-one-form-data="page_data"
        :products.sync="page_data.sales_products"
      />
    </div>
    <!-- 4、备注 -->
    <div class="block">
      <header class="step-header">
        <h3>4、备注</h3>
      </header>
      <section>
        <el-input
          v-model="page_data.remark"
          type="textarea"
          :rows="4"
          placeholder="请输入内容"
          maxlength="100"
          show-word-limit
          @input="page_data.remark = page_data.remark.replace(reg, '')"
        />
      </section>
    </div>
    <div class="block-box">
      <h3 class="step-header">
        5、其他信息
      </h3>
      <div class="block-content">
        <tabs :tabs-arr="tabArr" @returnIndex="handleTab" />
        <div class="tabs-content">
          <!-- 附加信息 -->
          <section
            v-show="status_store.active_tab === 0"
            class="table-section form-render"
          >
            <el-form-renderer
              v-if="render_data.extend_module.length"
              ref="expandFormRenderer"
              v-model="page_data.other_info.additional"
              class="form-renderer"
              :content="render_data.extend_module"
              inline
            />
            <div v-else class="no-exist-data-alert">
              暂无数据
            </div>
          </section>
          <!-- 发票信息 -->
          <section v-show="status_store.active_tab === 1" class="table-section">
            <div style="margin-bottom:10px;">
              <el-button
                size="mini"
                type="primary"
                @click="addInvoiceItemValidate"
              >
                添加发票信息
              </el-button>
              <span style="margin-left: 20px;color:red;"
                >可电脑上传文件及图片；也可通过手机扫码上传文件及图片</span
              >
            </div>
            <el-form
              ref="ruleForm"
              :model="page_data.other_info.invoice.content[ruleIndex]"
              :rules="rules"
              label-width="15px"
              class="ruleForm"
            >
              <el-editable
                ref="editable"
                v-loading="status_store.loading.invoice"
                :columns="INVOICE_COLUMNS"
                :payload="page_data.other_info.invoice"
                :style="{ height: '200px' }"
                height="200"
              >
                <template slot="default-index" slot-scope="scope">
                  {{ scope.$index + 1 }}
                </template>
                <template slot="default-ops" slot-scope="scope">
                  <el-button type="text" @click="removeCurInvoiceItem(scope)">
                    删除
                  </el-button>
                </template>
                <template slot="default-fileUrl" slot-scope="scope">
                  <el-form-item label=" " prop="url">
                    <TableUpload
                      :imgsrc="scope.row.url"
                      :imgname="scope.row.fileName"
                      :keystr="scope.$index"
                      image-limit=".pdf,.png,.jpg,.jpeg"
                      @ReturnImgUrl="returnInvoiceFileUrl"
                    />
                  </el-form-item>
                </template>
                <!-- 其他根据file填写的字段  invoiceSellerName-->
                <!-- 新增加字段 --开票方-->
                <template slot="default-invoiceSellerName" slot-scope="scope">
                  <el-input
                    v-model="scope.row.invoiceSellerName"
                    :maxlength="30"
                  />
                </template>
                <!-- 发票代码（30位）T.1.03.04变更 -->
                <template slot="default-invoiceCode" slot-scope="scope">
                  <el-form-item label=" " prop="invoiceCode">
                    <el-input v-model="scope.row.invoiceCode" :maxlength="30" />
                  </el-form-item>
                </template>
                <!-- 发票号（30位） T.1.03.04变更 -->
                <template slot="default-invoiceNum" slot-scope="scope">
                  <el-form-item label=" " prop="invoiceNum">
                    <el-input v-model="scope.row.invoiceNum" :maxlength="30" />
                  </el-form-item>
                </template>
                <!-- 薪增加字段--校验码 -->
                <template slot="default-invoiceCheckCode" slot-scope="scope">
                  <el-input
                    v-model="scope.row.invoiceCheckCode"
                    :maxlength="30"
                    aria-required=""
                  />
                </template>
                <!-- 发票抬头 -->
                <template slot="default-invoiceTittle" slot-scope="scope">
                  <el-form-item label=" " prop="invoiceTittle">
                    <el-input
                      v-model="scope.row.invoiceTittle"
                      :maxlength="30"
                    />
                  </el-form-item>
                </template>
                <!-- 发票金额 -->
                <template slot="default-invoiceAmount" slot-scope="scope">
                  <el-form-item label=" " prop="invoiceAmount">
                    <el-input-number
                      v-model="scope.row.invoiceAmount"
                      :max="999999999"
                      :precision="2"
                    />
                  </el-form-item>
                </template>
                <!-- 开票日期 -->
                <template slot="default-invoiceDate" slot-scope="scope">
                  <el-form-item label=" " prop="invoiceDate">
                    <el-date-picker
                      v-model="scope.row.invoiceDate"
                      value-format="yyyy-MM-dd"
                      type="date"
                      placeholder="选择日期"
                    />
                  </el-form-item>
                </template>
              </el-editable>
            </el-form>
          </section>
          <!-- 其他附件 -->
          <section v-show="status_store.active_tab === 2" class="table-section">
            <div style="margin-bottom:10px;">
              <el-button size="mini" type="primary" @click="addOtherFileItem">
                添加附件
              </el-button>
              <span style="margin-left: 20px;color:red;"
                >可电脑上传文件及图片；也可通过手机扫码上传文件及图片</span
              >
            </div>
            <el-editable
              :columns="ACCESSORIES_COLUMNS"
              :payload="page_data.other_info.other"
              height="200"
            >
              <template slot="default-index" slot-scope="scope">
                {{ scope.$index + 1 }}
              </template>
              <template slot="default-ops" slot-scope="scope">
                <el-button type="text" @click="removeCurOtherItem(scope)">
                  删除
                </el-button>
              </template>
              <template slot="default-fileUrl" slot-scope="scope">
                <TableUpload
                  :imgname="scope.row.fileName"
                  :imgsrc="scope.row.fileUrl"
                  :keystr="scope.$index"
                  @ReturnImgUrl="returnOtherFileUrl"
                />
              </template>
            </el-editable>
          </section>
        </div>
      </div>
    </div>
    <el-dialog
      title="提示"
      :visible.sync="status_store.dialog.confirm"
      width="30%"
    >
      <span>确定提交当前报台信息？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="status_store.dialog.confirm = false"
          >取 消</el-button
        >
        <el-button
          type="primary"
          :loading="buttonloading"
          @click="submitFinalData"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script src="./index.js"></script>

<style lang="less" src="./index.less"></style>
<style scoped lang="less">
.ruleForm {
  height: 200px;
}
/deep/ .ruleForm .el-form-item {
  margin-bottom: 0;
}
.nuxt-content .block {
  margin-bottom: 10px;
  background-color: #fff;
}
.create-report .block header {
  padding: 12px 16px;
  border-bottom: 1px solid #eef0f5;
  /* display: flex; */
}
.create-report .block section {
  position: relative;
  padding: 20px 16px;
}
.product-list-box {
  /deep/ .nuxt-content .block {
    margin-bottom: 10px;
    background-color: #fff;
  }
  /deep/ .block header {
    padding: 12px 16px;
    border-bottom: 1px solid #eef0f5;
    /* display: flex; */
  }
  /deep/ .block section {
    position: relative;
    padding: 20px 16px;
  }
}
</style>
